<template>
  <!-- 药品卡片 -->
  <div class="drugcard">
    <nuxt-link target="_blank" :to="'/hospitalDetails/' + hospital.id + '.html'">
      <img :src="hospital.hospitalImgPath" :alt="hospital.hospitalEnglishName" class="drugimg"/>
    </nuxt-link>
    <div class="druginfo">
      <nuxt-link target="_blank" :to="'/hospitalDetails/' + hospital.id + '.html'">
        <div class="drugtitle">{{ hospital.hospitalEnglishName }}</div>
      </nuxt-link>
      <nuxt-link target="_blank" :to="'/hospitalDetails/' + hospital.id + '.html'">
        <div class="drugcontent">{{ hospital.content }}</div>
      </nuxt-link>
    </div>
    <div class="WeChat">
      <div class="Scan">WeChat Scan <br> Free Inquiry</div>
      <img src="@/static/images/news/arrow.png" class="circular_arrow" />
      <img src="@/static/images/wxkf/wxkf.png" class="wechat_qr_code" />
    </div>
  </div>
</template>

<script>
export default {
  props: ["hospital"],
}
</script>

<style lang="scss" scoped>
.drugcard {
  background: #f5f8fd;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  .drugimg {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    margin-right: 16px;
    cursor: pointer;
  }

  .druginfo {
    max-width: 330px;
    margin-right: 16px;

    .drugtitle {
      font-weight: bold;
      font-size: 16px;
      color: #2e343e;
      line-height: 32px;

      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      white-space: normal;
      -webkit-line-clamp: 1;
    }

    .drugcontent {
      font-size: 14px;
      color: #616469;
      line-height: 28px;

      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      white-space: normal;
      -webkit-line-clamp: 2;
      cursor: pointer;
    }
  }

  .WeChat {
    width: 296px;
    height: 150px;
    border-left: 1px solid;
    border-image: linear-gradient(180deg,
        rgba(176, 213, 255, 0),
        rgba(176, 213, 255, 1),
        rgba(176, 213, 255, 0)) 1 1;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .Scan {
      font-weight: bold;
      font-size: 16px;
      color: #0078ff;
      line-height: 20px;
      margin-left: 16px;
    }

    .circular_arrow {
      width: 14px;
      height: 14px;
    }

    .wechat_qr_code {
      width: 112px;
      height: 112px;
      border: 4px solid #0078ff;
    }
  }
}
</style>